<!doctype html>
<html>
<head>
  <title>Graph 3D cloud with sized dots</title>

  <style>
    body {font: 10pt arial;}
  </style>
  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var data = null;
    var graph = null;

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // create the data table.
      data = new vis.DataSet();

      // create some shortcuts to math functions
      var sqrt = Math.sqrt;
      var pow = Math.pow;
      var random = Math.random;

      // create the animation data
      var imax = 100;
      for (var i = 0; i < imax; i++) {
        var x = pow(random(), 2);
        var y = pow(random(), 2);
        var z = pow(random(), 2);

        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
        var range = sqrt(2) - dist;

        data.add({x:x,y:y,z:z,style:range});
      }

      // specify options
      var options = {
        width:  '600px',
        height: '600px',
        style: 'dot-size',
        showPerspective: false,
        showGrid: true,
        keepAspectRatio: true,
        legendLabel:'value',
        verticalRatio: 1.0,
        cameraPosition: {
          horizontal: -0.54,
          vertical: 0.5,
          distance: 1.6
        }
      };

      // create our graph
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);
    }
  </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>

<body onload="drawVisualization()">
<div id="mygraph"></div>

<div id="info"></div>
</body>
</html>
